<!DOCTYPE html>
<!-- saved from url=(0043)http://benjamn.github.io/empirenode-2015/#/ -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">

    <title>The importance of import and export</title>

    <meta name="description" content="The importance of import and export">
    <meta name="author" content="Ben Newman">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

    <link rel="stylesheet" href="./The importance of import and export_files/reveal.css">
    <link rel="stylesheet" href="./The importance of import and export_files/benjamn.css" id="theme">
    <link rel="stylesheet" href="./The importance of import and export_files/default.min.css">
    <link rel="stylesheet" type="text/css" href="./The importance of import and export_files/overrides.css">

    <!-- Code syntax highlighting -->
    <link rel="stylesheet" href="./The importance of import and export_files/xcode.css">

    <script async="" src="./The importance of import and export_files/analytics.js"></script><script src="./The importance of import and export_files/highlight.pack.js"></script>
  </head>

  <body style="transition: -webkit-transform 0.8s ease;">
    <img class="branding" src="./The importance of import and export_files/meteor-logo-mark-black-on-transparent.png">

    <div class="reveal none center" role="application" data-transition-speed="default" data-background-transition="fade">

      <!-- Any section element inside of this container is displayed as a slide -->
      <div class="slides" style="width: 960px; height: 700px; zoom: 0.813857;">
        <section class="present" style="top: 0px; display: block;">
          <h1>
            The Importance of <code class="javascript hljs"><span class="hljs-keyword">import</span></code>
            and <code class="javascript hljs"><span class="hljs-keyword">export</span></code>
          </h1>
          <p>
            </p><div class="fragment" data-fragment-index="0">
              <br>
              <a target="_blank" href="mailto:ben@meteor.com">Ben Newman</a>
              (<a target="_blank" href="https://www.meteor.com/">Meteor</a>)
              <br>
              <a target="_blank" href="http://2015.empirenode.org/">EmpireNode 2015</a>
              <br>
            </div>
            <br>
            <pre class="contact fragment" data-fragment-index="1">{ <a target="_blank" href="http://github.com/benjamn">github</a>,
  <a target="_blank" href="http://twitter.com/benjamn">twitter</a>,
  <a target="_blank" href="http://instagram.com/benjamn">instagram</a>,
  <a target="_blank" href="http://facebook.com/benjamn">facebook</a>
}.com/benjamn
            </pre>
          <p></p>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 222.5px; display: block;">
          <code class="javascript block medium hljs">
<span class="hljs-keyword">export</span> * from
  <a href="http://benjamn.github.io/empirenode-2015"><span class="hljs-string">"http://benjamn.github.io/empirenode-2015"</span></a>
          </code>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 0px; display: block;">
          <h2>Let's talk about <code class="fragment javascript hljs" data-fragment-index="0"><span class="hljs-built_in">eval</span></code></h2>
          <br>
          <p class="fragment" data-fragment-index="1">
            The mere presence of <code class="javascript hljs"><span class="hljs-built_in">eval</span></code> in a
            function thwarts almost any kind of optimization or static
            analysis.
          </p>
          <p class="fragment" data-fragment-index="2">
            Most JavaScript programmers I know
            consider <code class="javascript hljs"><span class="hljs-built_in">eval</span></code> more harmful
            than <code>goto</code>.
          </p>
          <p class="fragment" data-fragment-index="3">
            Heaven forbid a snippet of user input should end up in one of
            those strings!
          </p>
          <p class="fragment" data-fragment-index="4">
            There's no good way for transpilers to
            support <code class="javascript hljs"><span class="hljs-built_in">eval</span></code>, so they
            basically don't even try.
          </p>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
          <h2>
            As a community we have decided
            <span class="fragment" data-fragment-index="0">it is never acceptable to
            use <code class="javascript hljs"><span class="hljs-built_in">eval</span></code>
            <span class="fragment" data-fragment-index="1"> when there is <em>any other way</em>
            to solve the problem.</span>
          </span></h2>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
          <h2>
            And yet <span class="fragment" data-fragment-index="0">we
            use <code class="javascript hljs"><span class="hljs-built_in">eval</span></code> all the time.</span>
          </h2>
          <p class="fragment" data-fragment-index="1">
            Of course it hides behind many different abstractions:
            <br>
            </p><ul>
              <li class="fragment" data-fragment-index="2">
                <code class="xml hljs"><span class="hljs-tag">&lt;<span class="hljs-title">script</span> <span class="hljs-attribute">src</span>=<span class="hljs-value">"http://..."</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span></code>
              </li>
              <li class="fragment" data-fragment-index="3">
                <code class="xml hljs"><span class="hljs-tag">&lt;<span class="hljs-title">script</span>&gt;</span><span class="undefined">...</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span></code>
              </li>
              <li class="fragment" data-fragment-index="4">
                <code class="javascript hljs"><span class="hljs-keyword">new</span> <span class="hljs-built_in">Function</span>(<span class="hljs-string">"..."</span>)()</code>
              </li>
              <li class="fragment" data-fragment-index="5">
                <code class="javascript hljs"><span class="hljs-built_in">require</span>(<span class="hljs-string">"vm"</span>).runInThisContext(<span class="hljs-string">"..."</span>)</code>
              </li>
              <li class="fragment" data-fragment-index="6">
                <code class="xml hljs"><span class="hljs-tag">&lt;<span class="hljs-title">a</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"javascript:..."</span>&gt;</span>Click me!<span class="hljs-tag">&lt;/<span class="hljs-title">a</span>&gt;</span></code>
              </li>
              <li class="fragment" data-fragment-index="7">
                <code class="xml hljs"><span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"No, me!"</span>
       <span class="hljs-attribute">onclick</span>=<span class="hljs-value">"..."</span> /&gt;</span></code>
              </li>
              <li class="fragment" data-fragment-index="8">
                <code class="javascript hljs">setTimeout(<span class="hljs-string">"..."</span>, <span class="hljs-number">1000</span>)</code>
              </li>
          <p></p>

        </ul></section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
          <h2>
            Nothing happens
          </h2>
          <h2 class="fragment" data-fragment-index="0">
            unless first
            <span class="fragment" data-fragment-index="1">an <code class="javascript hljs"><span class="hljs-built_in">eval</span></code>.</span>
          </h2>
          <br>
          <p class="fragment" data-fragment-index="2">
            <em style="float:right">Carl Sandburg</em>
          </p>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
          <h2>
            There is a<span class="fragment" data-fragment-index="0">n <code class="javascript hljs"><span class="hljs-built_in">eval</span></code>
            in everything.</span><br>
          </h2>
          <h2 class="fragment" data-fragment-index="1">
            That's how <span class="fragment" data-fragment-index="2">the code gets in.</span>
          </h2>
          <br>
          <p class="fragment" data-fragment-index="3">
            <em style="float:right">Leonard Cohen</em>
          </p>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
          <h2>
            There's no escaping <code class="javascript hljs"><span class="hljs-built_in">eval</span></code>
          </h2>
          <br>
          <p class="fragment" data-fragment-index="0">
            But it can be tamed, <span class="fragment" data-fragment-index="1">and Node does this
            better than any other JavaScript platform,</span>
            <span class="fragment" data-fragment-index="2">thanks to
            <a href="https://nodejs.org/docs/latest/api/modules.html#modules_modules" target="_blank"><strong>CommonJS</strong></a>.</span>
          </p>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
          <h2>CommonJS is great</h2>
          <ul>
            <li class="fragment" data-fragment-index="0">
              All your code runs in a specific module scope.
            </li>
            <li class="fragment" data-fragment-index="1">
              Any given module runs at most
              once, <span class="fragment" data-fragment-index="2">the first time
              you <code>require</code> it.</span>
            </li>
            <li class="fragment" data-fragment-index="3">
              Module source code is loaded from static files, <span class="fragment" data-fragment-index="4">according to
              <a target="_blank" href="https://nodejs.org/api/modules.html#modules_modules">simple
              rules</a>.</span>
            </li>
            <li class="fragment" data-fragment-index="5">
              Module load order emerges naturally.
            </li>
            <li class="fragment" data-fragment-index="6">
              Module <code>exports</code> remain distinct.
            </li>
            <li class="fragment" data-fragment-index="7">
              Global scope stays clean.
            </li>
          </ul>
          <br>
          <p class="fragment" data-fragment-index="8">
            Once your code starts
            running, <span class="fragment" data-fragment-index="9"><em>you</em> get to make all
            the decisions about what additional code is allowed to run,
            <span class="fragment" data-fragment-index="10">and when.</span>
          </span></p>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
          <h2>
            Has CommonJS won?
          </h2>
          <br>
          <p class="fragment" data-fragment-index="0">
            From the perspective of Node and NPM,<br>
            <span class="fragment" data-fragment-index="1">it certainly seems so.</span>
          </p>
          <p class="fragment" data-fragment-index="2">
            But what about code running in browsers?
          </p>
          <p class="fragment" data-fragment-index="3">
            Is "winning" really all we care about?
          </p>
          <p class="fragment" data-fragment-index="4">
            Can we do better?
          </p>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
          <h1>What's wrong with CommonJS?</h1>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>Problem 1: <span class="fragment" data-fragment-index="0">How code is loaded</span></h2>
          <br>
          <p class="fragment" data-fragment-index="1">
            Node has it easy. <span class="fragment" data-fragment-index="2">Just ask the file
            system!</span>
          </p>
          <p class="fragment" data-fragment-index="3">
            Not so simple or efficient to do hundreds of synchronous HTTP
            requests over the network.
          </p>
          <p class="fragment" data-fragment-index="4">
            Instead, there has to be a way to deliver <em>bundles</em> of
            code to the client.<span class="fragment" data-fragment-index="5">*</span>
          </p>
          <br>
          <p class="fragment" data-fragment-index="6">
            <em>* Bundling woes deserve a talk of their own.<br>
              <a href="https://medium.com/@trek/last-week-i-had-a-small-meltdown-on-twitter-about-npms-future-plans-around-front-end-packaging-b424dd8d367a" target="_blank">Listen</a> to
              <a target="_blank" href="https://twitter.com/trek">Trek Glowacki</a>.
            </em>
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>Problem 2: <span class="fragment" data-fragment-index="0">Dependency cycles</span></h2>
          <br>
          <code class="javascript fragment block small left hljs" data-fragment-index="1"><span class="hljs-comment">// wrap.js</span>
<span class="hljs-keyword">var</span> log = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./log"</span>).log;

exports.deferred = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params"></span>) </span>{
    setTimeout(fn, <span class="hljs-number">0</span>);
  };
};

exports.logged = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params">...args</span>) </span>{
    log(<span class="hljs-string">"calling the function"</span>);
    <span class="hljs-keyword">return</span> fn.apply(<span class="hljs-keyword">this</span>, args);
  };
};</code>
          <code class="javascript fragment block small right hljs" data-fragment-index="2"><span class="hljs-comment">// log.js</span>
<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);

exports.log = wrap.deferred(
  <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">...messages</span>) </span>{...}
);









          </code>
          <div style="clear:both">&nbsp;</div>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>Problem 2: Dependency cycles</h2>
          <br>
          <code class="javascript block small left hljs"><span class="hljs-comment">// wrap.js</span>
<span class="hljs-keyword">var</span> log = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./log"</span>).log;

exports.deferred = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params"></span>) </span>{
    setTimeout(fn, <span class="hljs-number">0</span>);
  };
};

exports.logged = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params">...args</span>) </span>{
    log(<span class="hljs-string">"calling the function"</span>);
    <span class="hljs-keyword">return</span> fn.apply(<span class="hljs-keyword">this</span>, args);
  };
};</code>
          <code class="javascript block small right hljs"><span class="hljs-comment">// log.js</span>
<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);

exports.log = wrap.deferred(
  <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">...messages</span>) </span>{...}
);




<span class="hljs-comment">// main.js</span>
<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);
<span class="hljs-built_in">require</span>(<span class="hljs-string">"http"</span>).createServer(
  wrap.logged((req, res) =&gt; {...})
).listen(<span class="hljs-number">8080</span>);</code>
          <div style="clear:both">&nbsp;</div>
          <p class="fragment" data-fragment-index="0">
            What's wrong here?
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>Problem 2: Dependency cycles</h2>
          <br>
          <code class="javascript block small left hljs"><span class="hljs-comment">// wrap.js</span>
<span class="hljs-keyword">var</span> log = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./log"</span>).log;

exports.deferred = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params"></span>) </span>{
    setTimeout(fn, <span class="hljs-number">0</span>);
  };
};

exports.logged = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params">...args</span>) </span>{
    log(<span class="hljs-string">"calling the function"</span>);
    <span class="hljs-keyword">return</span> fn.apply(<span class="hljs-keyword">this</span>, args);
  };
};</code>
          <code class="javascript block small right hljs"><span class="hljs-comment">// log.js</span>
<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);

exports.log = wrap.deferred(
  <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">...messages</span>) </span>{...}
);




<span class="hljs-comment">// main.js</span>
<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);
<span class="hljs-built_in">require</span>(<span class="hljs-string">"http"</span>).createServer(
  wrap.logged((req, res) =&gt; {...})
).listen(<span class="hljs-number">8080</span>);</code>
          <div style="clear:both">&nbsp;</div>
          <p>
            Can we fix it?
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>Problem 2: Dependency cycles</h2>
          <br>
          <code class="javascript block small left hljs"><span class="hljs-comment">// wrap.js</span>


exports.deferred = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params"></span>) </span>{
    setTimeout(fn, <span class="hljs-number">0</span>);
  };
};

exports.logged = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params">...args</span>) </span>{
    log(<span class="hljs-string">"calling the function"</span>);
    <span class="hljs-keyword">return</span> fn.apply(<span class="hljs-keyword">this</span>, args);
  };
};</code>
          <code class="javascript block small right hljs"><span class="hljs-comment">// log.js</span>
<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);

exports.log = wrap.deferred(
  <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">...messages</span>) </span>{...}
);




<span class="hljs-comment">// main.js</span>
<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);
<span class="hljs-built_in">require</span>(<span class="hljs-string">"http"</span>).createServer(
  wrap.logged((req, res) =&gt; {...})
).listen(<span class="hljs-number">8080</span>);</code>
          <div style="clear:both">&nbsp;</div>
          <p>
            Can we fix it?
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>Problem 2: Dependency cycles</h2>
          <br>
          <code class="javascript block small left hljs"><span class="hljs-comment">// wrap.js</span>

exports.deferred = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params"></span>) </span>{
    setTimeout(fn, <span class="hljs-number">0</span>);
  };
};


exports.logged = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params">...args</span>) </span>{
    log(<span class="hljs-string">"calling the function"</span>);
    <span class="hljs-keyword">return</span> fn.apply(<span class="hljs-keyword">this</span>, args);
  };
};</code>
          <code class="javascript block small right hljs"><span class="hljs-comment">// log.js</span>
<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);

exports.log = wrap.deferred(
  <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">...messages</span>) </span>{...}
);




<span class="hljs-comment">// main.js</span>
<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);
<span class="hljs-built_in">require</span>(<span class="hljs-string">"http"</span>).createServer(
  wrap.logged((req, res) =&gt; {...})
).listen(<span class="hljs-number">8080</span>);</code>
          <div style="clear:both">&nbsp;</div>
          <p>
            Can we fix it?
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>Problem 2: Dependency cycles</h2>
          <br>
          <code class="javascript block small left hljs"><span class="hljs-comment">// wrap.js</span>
exports.deferred = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params"></span>) </span>{
    setTimeout(fn, <span class="hljs-number">0</span>);
  };
};



exports.logged = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params">...args</span>) </span>{
    log(<span class="hljs-string">"calling the function"</span>);
    <span class="hljs-keyword">return</span> fn.apply(<span class="hljs-keyword">this</span>, args);
  };
};</code>
          <code class="javascript block small right hljs"><span class="hljs-comment">// log.js</span>
<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);

exports.log = wrap.deferred(
  <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">...messages</span>) </span>{...}
);




<span class="hljs-comment">// main.js</span>
<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);
<span class="hljs-built_in">require</span>(<span class="hljs-string">"http"</span>).createServer(
  wrap.logged((req, res) =&gt; {...})
).listen(<span class="hljs-number">8080</span>);</code>
          <div style="clear:both">&nbsp;</div>
          <p>
            Can we fix it?
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>Problem 2: Dependency cycles</h2>
          <br>
          <code class="javascript block small left hljs"><span class="hljs-comment">// wrap.js</span>
exports.deferred = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params"></span>) </span>{
    setTimeout(fn, <span class="hljs-number">0</span>);
  };
};

<span class="hljs-keyword">var</span> log = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./log"</span>).log;

exports.logged = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params">...args</span>) </span>{
    log(<span class="hljs-string">"calling the function"</span>);
    <span class="hljs-keyword">return</span> fn.apply(<span class="hljs-keyword">this</span>, args);
  };
};</code>
          <code class="javascript block small right hljs"><span class="hljs-comment">// log.js</span>
<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);

exports.log = wrap.deferred(
  <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">...messages</span>) </span>{...}
);




<span class="hljs-comment">// main.js</span>
<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);
<span class="hljs-built_in">require</span>(<span class="hljs-string">"http"</span>).createServer(
  wrap.logged((req, res) =&gt; {...})
).listen(<span class="hljs-number">8080</span>);</code>
          <div style="clear:both">&nbsp;</div>
          <p>
            Can we fix it?
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>Problem 2: Dependency cycles</h2>
          <br>
          <code class="javascript block small left hljs"><span class="hljs-comment">// wrap.js</span>
exports.deferred = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params"></span>) </span>{
    setTimeout(fn, <span class="hljs-number">0</span>);
  };
};

<span class="hljs-keyword">var</span> log = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./log"</span>).log;

exports.logged = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params">...args</span>) </span>{
    log(<span class="hljs-string">"calling the function"</span>);
    <span class="hljs-keyword">return</span> fn.apply(<span class="hljs-keyword">this</span>, args);
  };
};</code>
          <code class="javascript block small right hljs"><span class="hljs-comment">// log.js</span>
<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);

exports.log = wrap.deferred(
  <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">...messages</span>) </span>{...}
);




<span class="hljs-comment">// main.js</span>
<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);
<span class="hljs-built_in">require</span>(<span class="hljs-string">"http"</span>).createServer(
  wrap.logged((req, res) =&gt; {...})
).listen(<span class="hljs-number">8080</span>);</code>
          <div style="clear:both">&nbsp;</div>
          <p>
            Why does this work?
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>Problem 2: Dependency cycles</h2>
          <br>
          <code class="javascript block small left hljs"><span class="hljs-comment">// wrap.js</span>
exports.deferred = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params"></span>) </span>{
    setTimeout(fn, <span class="hljs-number">0</span>);
  };
};

<span class="hljs-keyword">var</span> log = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./log"</span>).log;

exports.logged = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params">...args</span>) </span>{
    log(<span class="hljs-string">"calling the function"</span>);
    <span class="hljs-keyword">return</span> fn.apply(<span class="hljs-keyword">this</span>, args);
  };
};</code>
          <code class="javascript block small right hljs"><span class="hljs-comment">// log.js</span>
<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);

exports.log = wrap.deferred(
  <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">...messages</span>) </span>{...}
);




<span class="hljs-comment">// main.js</span>
<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);
<span class="hljs-built_in">require</span>(<span class="hljs-string">"http"</span>).createServer(
  wrap.logged((req, res) =&gt; {...})
).listen(<span class="hljs-number">8080</span>);</code>
          <div style="clear:both">&nbsp;</div>
          <p>
            Will it always work?
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>Problem 2: Dependency cycles</h2>
          <br>
          <code class="javascript block small left hljs"><span class="hljs-comment">// wrap.js</span>
exports.deferred = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params"></span>) </span>{
    setTimeout(fn, <span class="hljs-number">0</span>);
  };
};

<span class="hljs-keyword">var</span> log = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./log"</span>).log;

exports.logged = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params">...args</span>) </span>{
    log(<span class="hljs-string">"calling the function"</span>);
    <span class="hljs-keyword">return</span> fn.apply(<span class="hljs-keyword">this</span>, args);
  };
};</code>
          <code class="javascript block small right hljs"><span class="hljs-comment">// log.js</span>
<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);

exports.log = wrap.deferred(
  <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">...messages</span>) </span>{...}
);



<span class="hljs-comment">// main.js</span>

<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);
<span class="hljs-built_in">require</span>(<span class="hljs-string">"http"</span>).createServer(
  wrap.logged((req, res) =&gt; {...})
).listen(<span class="hljs-number">8080</span>);</code>
          <div style="clear:both">&nbsp;</div>
          <p>
            Will it always work?
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>Problem 2: Dependency cycles</h2>
          <br>
          <code class="javascript block small left hljs"><span class="hljs-comment">// wrap.js</span>
exports.deferred = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params"></span>) </span>{
    setTimeout(fn, <span class="hljs-number">0</span>);
  };
};

<span class="hljs-keyword">var</span> log = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./log"</span>).log;

exports.logged = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params">...args</span>) </span>{
    log(<span class="hljs-string">"calling the function"</span>);
    <span class="hljs-keyword">return</span> fn.apply(<span class="hljs-keyword">this</span>, args);
  };
};</code>
          <code class="javascript block small right hljs"><span class="hljs-comment">// log.js</span>
<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);

exports.log = wrap.deferred(
  <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">...messages</span>) </span>{...}
);


<span class="hljs-comment">// main.js</span>


<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);
<span class="hljs-built_in">require</span>(<span class="hljs-string">"http"</span>).createServer(
  wrap.logged((req, res) =&gt; {...})
).listen(<span class="hljs-number">8080</span>);</code>
          <div style="clear:both">&nbsp;</div>
          <p>
            Will it always work?
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>Problem 2: Dependency cycles</h2>
          <br>
          <code class="javascript block small left hljs"><span class="hljs-comment">// wrap.js</span>
exports.deferred = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params"></span>) </span>{
    setTimeout(fn, <span class="hljs-number">0</span>);
  };
};

<span class="hljs-keyword">var</span> log = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./log"</span>).log;

exports.logged = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params">...args</span>) </span>{
    log(<span class="hljs-string">"calling the function"</span>);
    <span class="hljs-keyword">return</span> fn.apply(<span class="hljs-keyword">this</span>, args);
  };
};</code>
          <code class="javascript block small right hljs"><span class="hljs-comment">// log.js</span>
<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);

exports.log = wrap.deferred(
  <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">...messages</span>) </span>{...}
);

<span class="hljs-comment">// main.js</span>



<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);
<span class="hljs-built_in">require</span>(<span class="hljs-string">"http"</span>).createServer(
  wrap.logged((req, res) =&gt; {...})
).listen(<span class="hljs-number">8080</span>);</code>
          <div style="clear:both">&nbsp;</div>
          <p>
            Will it always work?
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>Problem 2: Dependency cycles</h2>
          <br>
          <code class="javascript block small left hljs"><span class="hljs-comment">// wrap.js</span>
exports.deferred = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params"></span>) </span>{
    setTimeout(fn, <span class="hljs-number">0</span>);
  };
};

<span class="hljs-keyword">var</span> log = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./log"</span>).log;

exports.logged = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params">...args</span>) </span>{
    log(<span class="hljs-string">"calling the function"</span>);
    <span class="hljs-keyword">return</span> fn.apply(<span class="hljs-keyword">this</span>, args);
  };
};</code>
          <code class="javascript block small right hljs"><span class="hljs-comment">// log.js</span>
<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);

exports.log = wrap.deferred(
  <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">...messages</span>) </span>{...}
);

<span class="hljs-comment">// main.js</span>
<span class="hljs-keyword">var</span> log = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./log"</span>);


<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);
<span class="hljs-built_in">require</span>(<span class="hljs-string">"http"</span>).createServer(
  wrap.logged((req, res) =&gt; {...})
).listen(<span class="hljs-number">8080</span>);</code>
          <div style="clear:both">&nbsp;</div>
          <p>
            Will it always work?
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>Problem 2: Dependency cycles</h2>
          <br>
          <code class="javascript block small left hljs"><span class="hljs-comment">// wrap.js</span>
exports.deferred = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params"></span>) </span>{
    setTimeout(fn, <span class="hljs-number">0</span>);
  };
};

<span class="hljs-keyword">var</span> log = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./log"</span>).log;

exports.logged = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params">...args</span>) </span>{
    log(<span class="hljs-string">"calling the function"</span>);
    <span class="hljs-keyword">return</span> fn.apply(<span class="hljs-keyword">this</span>, args);
  };
};</code>
          <code class="javascript block small right hljs"><span class="hljs-comment">// log.js</span>
<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);

exports.log = wrap.deferred(
  <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">...messages</span>) </span>{...}
);

<span class="hljs-comment">// main.js</span>
<span class="hljs-keyword">var</span> log = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./log"</span>);
log(<span class="hljs-string">"STARTING SERVER"</span>);

<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);
<span class="hljs-built_in">require</span>(<span class="hljs-string">"http"</span>).createServer(
  wrap.logged((req, res) =&gt; {...})
).listen(<span class="hljs-number">8080</span>);</code>
          <div style="clear:both">&nbsp;</div>
          <p>
            Will it always work?
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>Problem 2: Dependency cycles</h2>
          <br>
          <code class="javascript block small left hljs"><span class="hljs-comment">// wrap.js</span>
exports.deferred = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params"></span>) </span>{
    setTimeout(fn, <span class="hljs-number">0</span>);
  };
};

<span class="hljs-keyword">var</span> log = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./log"</span>).log;

exports.logged = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params">...args</span>) </span>{
    log(<span class="hljs-string">"calling the function"</span>);
    <span class="hljs-keyword">return</span> fn.apply(<span class="hljs-keyword">this</span>, args);
  };
};</code>
          <code class="javascript block small right hljs"><span class="hljs-comment">// log.js</span>
<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);

exports.log = wrap.deferred(
  <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">...messages</span>) </span>{...}
);

<span class="hljs-comment">// main.js</span>
<span class="hljs-keyword">var</span> log = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./log"</span>);
log(<span class="hljs-string">"STARTING SERVER"</span>);

<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);
<span class="hljs-built_in">require</span>(<span class="hljs-string">"http"</span>).createServer(
  wrap.logged((req, res) =&gt; {...})
).listen(<span class="hljs-number">8080</span>);</code>
          <div style="clear:both">&nbsp;</div>
          <p>
            What about now?
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>Problem 2: Dependency cycles</h2>
          <br>
          <code class="javascript block small left hljs"><span class="hljs-comment">// wrap.js</span>
exports.deferred = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params"></span>) </span>{
    setTimeout(fn, <span class="hljs-number">0</span>);
  };
};

<span class="hljs-keyword">var</span> log = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./log"</span>).log;

exports.logged = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">fn</span>) </span>{
  <span class="hljs-keyword">return</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">wrapper</span>(<span class="hljs-params">...args</span>) </span>{
    log(<span class="hljs-string">"calling the function"</span>);
    <span class="hljs-keyword">return</span> fn.apply(<span class="hljs-keyword">this</span>, args);
  };
};</code>
          <code class="javascript block small right hljs"><span class="hljs-comment">// log.js</span>
<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);

exports.log = wrap.deferred(
  <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">...messages</span>) </span>{...}
);

<span class="hljs-comment">// main.js</span>
<span class="hljs-keyword">var</span> log = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./log"</span>);
log(<span class="hljs-string">"STARTING SERVER"</span>);

<span class="hljs-keyword">var</span> wrap = <span class="hljs-built_in">require</span>(<span class="hljs-string">"./wrap"</span>);
<span class="hljs-built_in">require</span>(<span class="hljs-string">"http"</span>).createServer(
  wrap.logged((req, res) =&gt; {...})
).listen(<span class="hljs-number">8080</span>);</code>
          <div style="clear:both">&nbsp;</div>
          <p>
            What happens when the first request comes in?
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>Problem 2: Dependency cycles</h2>
          <br>
          <ul>
            <li class="fragment" data-fragment-index="0">
              Not forbidden!
            </li>
            <li class="fragment" data-fragment-index="1">
              Relatively simple, deterministic
              <a href="https://nodejs.org/api/modules.html#modules_cycles" target="_blank">resolution policy</a>.
            </li>
            <li class="fragment" data-fragment-index="2">
              Highly sensitive to load order, <span class="fragment" data-fragment-index="3">which
              is beyond the control of the modules participating in the
              cycle.</span>
            </li>
            <li class="fragment" data-fragment-index="4">
              <a href="https://github.com/facebook/react/commit/2ee66262db9fb91b0d0e9d64cefeb223074f8e05?diff=split" target="_blank">Example</a> from the React codebase where
              we gave up on modularity in the name of preventing cycles.
            </li>
            <li class="fragment" data-fragment-index="5">
              Cycles can be useful.
            </li>
            <li class="fragment" data-fragment-index="6">
              Cycles should work.
            </li>
          </ul>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
          <h2>
            Problem 3: <span class="fragment" data-fragment-index="0">
              <code class="javascript hljs">exports</code> vs.
              <code class="javascript hljs"><span class="hljs-built_in">module</span>.exports</code>
            </span>
          </h2>
          <p class="fragment" data-fragment-index="1">
            Immediately returning a partially populated
            <code class="javascript hljs">exports</code> object in case of
            circular dependencies would work so much better if
            that <code class="javascript hljs">exports</code> object was
            guaranteed to become complete eventually.
          </p>
          <p class="fragment" data-fragment-index="2">
            But modules can change the very identity of
            <code class="javascript hljs">exports</code> by reassigning
            the <code class="javascript hljs"><span class="hljs-built_in">module</span>.exports</code> property,
            <span class="fragment" data-fragment-index="3">rendering that partial
            <code class="javascript hljs">exports</code> object totally
            irrelevant.</span>
          </p>
          <p class="fragment" data-fragment-index="4">
            Different modules that <code>require</code> the same module
            can end up with totally unrelated results!
          </p>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
          <h2>Problem 4: <span class="fragment" data-fragment-index="0">Multiple exports</span></h2>
          <br>
          <p class="fragment" data-fragment-index="1">
            It's definitely nice
            that <code class="javascript hljs">exports</code> objects can have
            multiple properties.
          </p>
          <p class="fragment" data-fragment-index="2">
            But it's nearly impossible to determine whether a certain
            property is actually used.
          </p>
          <p class="fragment" data-fragment-index="3">
            Not a huge problem on the server, but client bundlers like
            <a target="_blank" href="http://browserify.org/">Browserify</a> and
            <a target="_blank" href="https://webpack.github.io/">Webpack</a> end up
            including tons of dead code.
          </p>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
          <h2>
            Self-discipline?
          </h2>
          <ul>
            <li class="fragment" data-fragment-index="0">
              Never assign to
              <code class="javascript hljs"><span class="hljs-built_in">module</span>.exports</code>,
              <span class="fragment" data-fragment-index="1">unless you are certain your module
              has no (circular) dependencies.</span>
            </li>
            <li class="fragment" data-fragment-index="2">
              Store references to imported <code>exports</code> objects:
              <code class="javascript block small hljs">
<span class="hljs-keyword">var</span> a = <span class="hljs-built_in">require</span>(<span class="hljs-string">"a"</span>); <span class="hljs-comment">// Mostly safe.</span>
<span class="hljs-keyword">var</span> foo = <span class="hljs-built_in">require</span>(<span class="hljs-string">"a"</span>).foo; <span class="hljs-comment">// Dangerous!</span>

exports.good = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">arg</span>) </span>{
  <span class="hljs-keyword">return</span> a.foo(<span class="hljs-string">"good"</span>, arg); <span class="hljs-comment">// Uses the latest value of a.foo.</span>
};

exports.bad = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">arg</span>) </span>{
  <span class="hljs-keyword">return</span> foo(<span class="hljs-string">"bad"</span>, arg); <span class="hljs-comment">// Uses a stale value.</span>
};</code>
            </li>
          </ul>
          <p class="fragment" data-fragment-index="3">
            There's nothing about CommonJS that helps you (or your
            teammates) keep this discipline.
          </p>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
          <h2>
            CommonJS may be the most popular module system we have
          </h2>
          <br>
          <p class="fragment" data-fragment-index="0">
            But it's a shame that we're even talking about one module
            system winning a popularity contest.
          </p>
          <br>
          <p class="fragment" data-fragment-index="1">
            Almost every other language avoids this contest entirely, by
            providing <strong>a built-in module system</strong>, and most
            of them do it with a special syntax.
          </p>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
          <h2>A native module system...</h2>
          <br>
          <ul>
            <li class="fragment" data-fragment-index="0">
              eases cooperation between authors and consumers of libraries,
            </li>
            <li class="fragment" data-fragment-index="1">
              eliminates the need for each library to provide its own
              module-loading system,
            </li>
            <li class="fragment" data-fragment-index="2">
              regularizes the structure of applications, and
            </li>
            <li class="fragment" data-fragment-index="3">
              allows the developer community to stop debating the merits of different
              code sharing mechanisms.
              <br><br>
            </li>
            <li class="fragment" style="list-style-type:none" data-fragment-index="4">
              <strong class="blink" style="visibility: visible;">
                <code class="xml hljs"><span class="hljs-tag">&lt;<span class="hljs-title">blink</span>&gt;</span></code><br>
                <code>  </code>We have more interesting problems to solve!<br>
                <code class="xml hljs"><span class="hljs-tag">&lt;/<span class="hljs-title">blink</span>&gt;</span></code>
              </strong>
            </li>
          </ul>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
          <h3>
            A language without a native module system is a language in
            which no one is ever quite sure how to share their code with the
            widest possible audience.
          </h3>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
          <h3>
            Betting on the wrong best practice (CommonJS? AMD? UMD?) is a
            recipe for obscurity, while reverting to the simplest common
            denominator (global variables) feels like giving up.
          </h3>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
          <h2>
            And that's why the new ECMAScript 2015
            <code class="javascript hljs"><span class="hljs-keyword">import</span></code>
            and <code class="javascript hljs"><span class="hljs-keyword">export</span></code> statements are so
            vitally important.
          </h2>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
          <h2>
            A native module system would be a huge
            relief <span class="fragment" data-fragment-index="0">even if it was more restrictive
            than CommonJS!</span>
          </h2>
          <br>
          <p class="fragment" data-fragment-index="1">
            The Go module system simply forbids circular dependencies.
          </p>
          <p class="fragment" data-fragment-index="2">
            That's one solution.
          </p>
          <p class="fragment" data-fragment-index="3">
            If you don't like it, don't use Go.
          </p>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
          <h3>
            But in fact the ES2015 module system was designed with all the
            strengths and weaknesses of CommonJS in mind
          </h3>
          <br>
          <p class="fragment" data-fragment-index="0">
            Thanks to the hard work and cleverness of people like
            <a target="_blank" href="https://twitter.com/littlecalculist">Dave Herman</a>,
            <span class="javascript">ES2015 modules solve or at least
            mitigate all four of the problems I mentioned earlier.
          </span></p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>So how does it work?</h2>
          <p class="fragment" data-fragment-index="0">
            At first glance, the
            ES2015 <code class="javascript hljs"><span class="hljs-keyword">import</span></code> statement looks
            pretty similar to a destructuring variable declaration:
          </p>
          <div class="align-left"><code class="fragment javascript block small hljs" data-fragment-index="1">
<span class="hljs-keyword">let</span> {readFile, writeFile} = <span class="hljs-built_in">require</span>(<span class="hljs-string">"fs"</span>);








</code></div>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>So how does it work?</h2>
          <p>
            At first glance, the
            ES2015 <code class="javascript hljs"><span class="hljs-keyword">import</span></code> statement looks
            pretty similar to a destructuring variable declaration:
          </p>
          <div class="align-left"><code class="javascript block small hljs">
<span class="hljs-keyword">let</span> {readFile, writeFile} = <span class="hljs-built_in">require</span>(<span class="hljs-string">"fs"</span>);
<span class="hljs-keyword">import</span> {readFile, writeFile} <span class="hljs-keyword">from</span> <span class="hljs-string">"fs"</span>;







</code></div>
          <p class="fragment" data-fragment-index="0">
            What's the difference?
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>So how does it work?</h2>
          <p>
            At first glance, the
            ES2015 <code class="javascript hljs"><span class="hljs-keyword">import</span></code> statement looks
            pretty similar to a destructuring variable declaration:
          </p>
          <div class="align-left"><code class="javascript block small hljs">
<span class="hljs-keyword">let</span> {readFile, writeFile} = <span class="hljs-built_in">require</span>(<span class="hljs-string">"fs"</span>);
<span class="hljs-keyword">import</span> {readFile, writeFile} <span class="hljs-keyword">from</span> <span class="hljs-string">"fs"</span>;

<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">ensureTrailingNewline</span>(<span class="hljs-params">path, callback</span>) </span>{
  readFile(path, <span class="hljs-string">"utf8"</span>, (err, text) =&gt; {
    <span class="hljs-keyword">if</span> (err) callback(err);
    <span class="hljs-keyword">else</span> writeFile(path, text.replace(<span class="hljs-regexp">/\n*$/</span>, <span class="hljs-string">"\n"</span>), callback);
  });
}</code></div>
          <p>
            Consider this usage example.
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>So how does it work?</h2>
          <p>
            At first glance, the
            ES2015 <code class="javascript hljs"><span class="hljs-keyword">import</span></code> statement looks
            pretty similar to a destructuring variable declaration:
          </p>
          <div class="align-left"><code class="javascript block small hljs">
<span class="hljs-keyword">let</span> {readFile, writeFile} = <span class="hljs-built_in">require</span>(<span class="hljs-string">"fs"</span>);


<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">ensureTrailingNewline</span>(<span class="hljs-params">path, callback</span>) </span>{
  readFile(path, <span class="hljs-string">"utf8"</span>, (err, text) =&gt; {
    <span class="hljs-keyword">if</span> (err) callback(err);
    <span class="hljs-keyword">else</span> writeFile(path, text.replace(<span class="hljs-regexp">/\n*$/</span>, <span class="hljs-string">"\n"</span>), callback);
  });
}</code></div>
          <p>
            What happens with the destructuring version?
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>So how does it work?</h2>
          <p>
            At first glance, the
            ES2015 <code class="javascript hljs"><span class="hljs-keyword">import</span></code> statement looks
            pretty similar to a destructuring variable declaration:
          </p>
          <div class="align-left"><code class="javascript block small hljs">
<span class="hljs-keyword">const</span> _fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">"fs"</span>);
<span class="hljs-keyword">let</span> readFile = _fs.readFile, writeFile = _fs.writeFile;

<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">ensureTrailingNewline</span>(<span class="hljs-params">path, callback</span>) </span>{
  readFile(path, <span class="hljs-string">"utf8"</span>, (err, text) =&gt; {
    <span class="hljs-keyword">if</span> (err) callback(err);
    <span class="hljs-keyword">else</span> writeFile(path, text.replace(<span class="hljs-regexp">/\n*$/</span>, <span class="hljs-string">"\n"</span>), callback);
  });
}</code></div>
          <p>
            Imported properties are simply stored in variables.
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>So how does it work?</h2>
          <p>
            At first glance, the
            ES2015 <code class="javascript hljs"><span class="hljs-keyword">import</span></code> statement looks
            pretty similar to a destructuring variable declaration:
          </p>
          <div class="align-left"><code class="javascript block small hljs">
<span class="hljs-keyword">const</span> _fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">"fs"</span>);
<span class="hljs-keyword">let</span> readFile = _fs.readFile, writeFile = _fs.writeFile;

<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">ensureTrailingNewline</span>(<span class="hljs-params">path, callback</span>) </span>{
  readFile(path, <span class="hljs-string">"utf8"</span>, (err, text) =&gt; {
    <span class="hljs-keyword">if</span> (err) callback(err);
    <span class="hljs-keyword">else</span> writeFile(path, text.replace(<span class="hljs-regexp">/\n*$/</span>, <span class="hljs-string">"\n"</span>), callback);
  });
}</code></div>
          <p>
            This has all the problems as our earlier example!
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>So how does it work?</h2>
          <p>
            At first glance, the
            ES2015 <code class="javascript hljs"><span class="hljs-keyword">import</span></code> statement looks
            pretty similar to a destructuring variable declaration:
          </p>
          <div class="align-left"><code class="javascript block small hljs">
<span class="hljs-comment">// Remember this hazard?</span>
<span class="hljs-keyword">let</span> foo = <span class="hljs-built_in">require</span>(<span class="hljs-string">"a"</span>).foo;

<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">ensureTrailingNewline</span>(<span class="hljs-params">path, callback</span>) </span>{
  readFile(path, <span class="hljs-string">"utf8"</span>, (err, text) =&gt; {
    <span class="hljs-keyword">if</span> (err) callback(err);
    <span class="hljs-keyword">else</span> writeFile(path, text.replace(<span class="hljs-regexp">/\n*$/</span>, <span class="hljs-string">"\n"</span>), callback);
  });
}</code></div>
          <p>
            This has all the problems as our earlier example!
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>So how does it work?</h2>
          <p>
            At first glance, the
            ES2015 <code class="javascript hljs"><span class="hljs-keyword">import</span></code> statement looks
            pretty similar to a destructuring variable declaration:
          </p>
          <div class="align-left"><code class="javascript block small hljs">
<span class="hljs-keyword">import</span> {readFile, writeFile} <span class="hljs-keyword">from</span> <span class="hljs-string">"fs"</span>;


<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">ensureTrailingNewline</span>(<span class="hljs-params">path, callback</span>) </span>{
  readFile(path, <span class="hljs-string">"utf8"</span>, (err, text) =&gt; {
    <span class="hljs-keyword">if</span> (err) callback(err);
    <span class="hljs-keyword">else</span> writeFile(path, text.replace(<span class="hljs-regexp">/\n*$/</span>, <span class="hljs-string">"\n"</span>), callback);
  });
}</code></div>
          <p>
            How about the ES2015 version?
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>So how does it work?</h2>
          <p>
            At first glance, the
            ES2015 <code class="javascript hljs"><span class="hljs-keyword">import</span></code> statement looks
            pretty similar to a destructuring variable declaration:
          </p>
          <div class="align-left"><code class="javascript block small hljs">
<span class="hljs-keyword">const</span> _fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">"fs"</span>);


<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">ensureTrailingNewline</span>(<span class="hljs-params">path, callback</span>) </span>{
  readFile(path, <span class="hljs-string">"utf8"</span>, (err, text) =&gt; {
    <span class="hljs-keyword">if</span> (err) callback(err);
    <span class="hljs-keyword">else</span> writeFile(path, text.replace(<span class="hljs-regexp">/\n*$/</span>, <span class="hljs-string">"\n"</span>), callback);
  });
}</code></div>
          <p>
            Behind the scenes, a reference to the module is imported.
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>So how does it work?</h2>
          <p>
            At first glance, the
            ES2015 <code class="javascript hljs"><span class="hljs-keyword">import</span></code> statement looks
            pretty similar to a destructuring variable declaration:
          </p>
          <div class="align-left"><code class="javascript block small hljs">
<span class="hljs-keyword">const</span> _fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">"fs"</span>);


<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">ensureTrailingNewline</span>(<span class="hljs-params">path, callback</span>) </span>{
  _fs.readFile(path, <span class="hljs-string">"utf8"</span>, (err, text) =&gt; {
    <span class="hljs-keyword">if</span> (err) callback(err);
    <span class="hljs-keyword">else</span> _fs.writeFile(path, text.replace(<span class="hljs-regexp">/\n*$/</span>, <span class="hljs-string">"\n"</span>), callback);
  });
}</code></div>
          <p>
            References to the imports then get "rewritten" as if they were
            member expressions.
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>So how does it work?</h2>
          <p>
            At first glance, the
            ES2015 <code class="javascript hljs"><span class="hljs-keyword">import</span></code> statement looks
            pretty similar to a destructuring variable declaration:
          </p>
          <div class="align-left"><code class="javascript block small hljs">
<span class="hljs-keyword">const</span> _fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">"fs"</span>);


<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">ensureTrailingNewline</span>(<span class="hljs-params">path, callback</span>) </span>{
  _fs.readFile(path, <span class="hljs-string">"utf8"</span>, (err, text) =&gt; {
    <span class="hljs-keyword">if</span> (err) callback(err);
    <span class="hljs-keyword">else</span> _fs.writeFile(path, text.replace(<span class="hljs-regexp">/\n*$/</span>, <span class="hljs-string">"\n"</span>), callback);
  });
}
          </code></div>
          <p class="fragment" data-fragment-index="0">
            With ES2015, <span class="fragment" data-fragment-index="1"><code>ensureTrailingNewline</code>
            always uses the latest version of <code>readFile</code>
            and <code>writeFile</code>.</span>
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>So how does it work?</h2>
          <p>
            At first glance, the
            ES2015 <code class="javascript hljs"><span class="hljs-keyword">import</span></code> statement looks
            pretty similar to a destructuring variable declaration:
          </p>
          <div class="align-left"><code class="javascript block small hljs">
<span class="hljs-keyword">const</span> _fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">"fs"</span>);


<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">ensureTrailingNewline</span>(<span class="hljs-params">path, callback</span>) </span>{
  _fs.readFile(path, <span class="hljs-string">"utf8"</span>, (err, text) =&gt; {
    <span class="hljs-keyword">if</span> (err) callback(err);
    <span class="hljs-keyword">else</span> _fs.writeFile(path, text.replace(<span class="hljs-regexp">/\n*$/</span>, <span class="hljs-string">"\n"</span>), callback);
  });
}
          </code></div>
          <p>
            <a target="_blank" href="https://www.npmjs.com/package/graceful-fs">Popular</a>
            package where this matters:
            <a target="_blank" class="fragment" href="https://github.com/isaacs/node-graceful-fs/blob/4f6a7e8a01/README.md#global-patching" data-fragment-index="0"><code>graceful-fs</code></a>
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>
            What about <code class="javascript hljs"><span class="hljs-built_in">module</span>.exports</code>?
          </h2>
          <p class="fragment" data-fragment-index="0">
            ES2015 modules can define
            a <code class="javascript hljs"><span class="hljs-keyword">default</span></code> exported value:
          </p>
          <div class="align-left">
            <code class="javascript fragment block small hljs" data-fragment-index="1">
<span class="hljs-comment">// In abc.js:</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">a</span>(<span class="hljs-params"></span>) </span>{...}











            </code>
          </div>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>
            What about <code class="javascript hljs"><span class="hljs-built_in">module</span>.exports</code>?
          </h2>
          <p>
            ES2015 modules can define
            a <code class="javascript hljs"><span class="hljs-keyword">default</span></code> exported value:
          </p>
          <div class="align-left">
            <code class="javascript block small hljs">
<span class="hljs-comment">// In abc.js:</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">a</span>(<span class="hljs-params"></span>) </span>{...}



<span class="hljs-comment">// In d.js:</span>
<span class="hljs-keyword">import</span> a <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;






            </code>
          </div>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>
            What about <code class="javascript hljs"><span class="hljs-built_in">module</span>.exports</code>?
          </h2>
          <p>
            ES2015 modules can define
            a <code class="javascript hljs"><span class="hljs-keyword">default</span></code> exported value:
          </p>
          <div class="align-left">
            <code class="javascript block small hljs">
<span class="hljs-comment">// In abc.js:</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{...}



<span class="hljs-comment">// In d.js:</span>
<span class="hljs-keyword">import</span> a <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;






            </code>
          </div>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>
            What about <code class="javascript hljs"><span class="hljs-built_in">module</span>.exports</code>?
          </h2>
          <p>
            ES2015 modules can define
            a <code class="javascript hljs"><span class="hljs-keyword">default</span></code> exported value:
          </p>
          <div class="align-left">
            <code class="javascript block small hljs">
<span class="hljs-comment">// In abc.js:</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{...}



<span class="hljs-comment">// In d.js:</span>
<span class="hljs-keyword">import</span> a <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;
<span class="hljs-keyword">import</span> a1 <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;





            </code>
          </div>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>
            What about <code class="javascript hljs"><span class="hljs-built_in">module</span>.exports</code>?
          </h2>
          <p>
            ES2015 modules can define
            a <code class="javascript hljs"><span class="hljs-keyword">default</span></code> exported value:
          </p>
          <div class="align-left">
            <code class="javascript block small hljs">
<span class="hljs-comment">// In abc.js:</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{...}
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">b</span>(<span class="hljs-params"></span>) </span>{...}


<span class="hljs-comment">// In d.js:</span>
<span class="hljs-keyword">import</span> a <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;
<span class="hljs-keyword">import</span> a1 <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;





            </code>
          </div>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>
            What about <code class="javascript hljs"><span class="hljs-built_in">module</span>.exports</code>?
          </h2>
          <p>
            ES2015 modules can define
            a <code class="javascript hljs"><span class="hljs-keyword">default</span></code> exported value:
          </p>
          <div class="align-left">
            <code class="javascript block small hljs">
<span class="hljs-comment">// In abc.js:</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{...}
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">b</span>(<span class="hljs-params"></span>) </span>{...}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> c = <span class="hljs-number">299792458</span>;

<span class="hljs-comment">// In d.js:</span>
<span class="hljs-keyword">import</span> a <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;
<span class="hljs-keyword">import</span> a1 <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;





            </code>
          </div>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>
            What about <code class="javascript hljs"><span class="hljs-built_in">module</span>.exports</code>?
          </h2>
          <p>
            ES2015 modules can define
            a <code class="javascript hljs"><span class="hljs-keyword">default</span></code> exported value:
          </p>
          <div class="align-left">
            <code class="javascript block small hljs">
<span class="hljs-comment">// In abc.js:</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{...}
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">b</span>(<span class="hljs-params"></span>) </span>{...}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> c = <span class="hljs-number">299792458</span>;

<span class="hljs-comment">// In d.js:</span>
<span class="hljs-keyword">import</span> a <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;
<span class="hljs-keyword">import</span> a1 <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;
<span class="hljs-keyword">import</span> {b, c} <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;




            </code>
          </div>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>
            What about <code class="javascript hljs"><span class="hljs-built_in">module</span>.exports</code>?
          </h2>
          <p>
            ES2015 modules can define
            a <code class="javascript hljs"><span class="hljs-keyword">default</span></code> exported value:
          </p>
          <div class="align-left">
            <code class="javascript block small hljs">
<span class="hljs-comment">// In abc.js:</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{...}
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">b</span>(<span class="hljs-params"></span>) </span>{...}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> c = <span class="hljs-number">299792458</span>;

<span class="hljs-comment">// In d.js:</span>
<span class="hljs-keyword">import</span> a <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;
<span class="hljs-keyword">import</span> a1 <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;
<span class="hljs-keyword">import</span> {b, c} <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;
<span class="hljs-keyword">import</span> {b <span class="hljs-keyword">as</span> bee, c <span class="hljs-keyword">as</span> lightSpeed} <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;



            </code>
          </div>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>
            What about <code class="javascript hljs"><span class="hljs-built_in">module</span>.exports</code>?
          </h2>
          <p>
            ES2015 modules can define
            a <code class="javascript hljs"><span class="hljs-keyword">default</span></code> exported value:
          </p>
          <div class="align-left">
            <code class="javascript block small hljs">
<span class="hljs-comment">// In abc.js:</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{...}
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">b</span>(<span class="hljs-params"></span>) </span>{...}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> c = <span class="hljs-number">299792458</span>;

<span class="hljs-comment">// In d.js:</span>
<span class="hljs-keyword">import</span> a <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;
<span class="hljs-keyword">import</span> a1 <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;
<span class="hljs-keyword">import</span> {b, c} <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;
<span class="hljs-keyword">import</span> {b <span class="hljs-keyword">as</span> bee, c <span class="hljs-keyword">as</span> lightSpeed} <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;
<span class="hljs-keyword">import</span> {default <span class="hljs-keyword">as</span> a2} <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;


            </code>
          </div>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>
            What about <code class="javascript hljs"><span class="hljs-built_in">module</span>.exports</code>?
          </h2>
          <p>
            ES2015 modules can define
            a <code class="javascript hljs"><span class="hljs-keyword">default</span></code> exported value:
          </p>
          <div class="align-left">
            <code class="javascript block small hljs">
<span class="hljs-comment">// In abc.js:</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{...}
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">b</span>(<span class="hljs-params"></span>) </span>{...}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> c = <span class="hljs-number">299792458</span>;

<span class="hljs-comment">// In d.js:</span>
<span class="hljs-keyword">import</span> a <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;
<span class="hljs-keyword">import</span> a1 <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;
<span class="hljs-keyword">import</span> {b, c} <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;
<span class="hljs-keyword">import</span> {b <span class="hljs-keyword">as</span> bee, c <span class="hljs-keyword">as</span> lightSpeed} <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;
<span class="hljs-keyword">import</span> {default <span class="hljs-keyword">as</span> a2} <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;
<span class="hljs-keyword">import</span> {default <span class="hljs-keyword">as</span> a3, b, c} <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;

            </code>
          </div>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>
            What about <code class="javascript hljs"><span class="hljs-built_in">module</span>.exports</code>?
          </h2>
          <p>
            ES2015 modules can define
            a <code class="javascript hljs"><span class="hljs-keyword">default</span></code> exported value:
          </p>
          <div class="align-left">
            <code class="javascript block small hljs">
<span class="hljs-comment">// In abc.js:</span>
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>{...}
<span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">b</span>(<span class="hljs-params"></span>) </span>{...}
<span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> c = <span class="hljs-number">299792458</span>;

<span class="hljs-comment">// In d.js:</span>
<span class="hljs-keyword">import</span> a <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;
<span class="hljs-keyword">import</span> a1 <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;
<span class="hljs-keyword">import</span> {b, c} <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;
<span class="hljs-keyword">import</span> {b <span class="hljs-keyword">as</span> bee, c <span class="hljs-keyword">as</span> lightSpeed} <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;
<span class="hljs-keyword">import</span> {default <span class="hljs-keyword">as</span> a2} <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;
<span class="hljs-keyword">import</span> {default <span class="hljs-keyword">as</span> a3, b, c} <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;
<span class="hljs-keyword">import</span> a4, {b, c} <span class="hljs-keyword">from</span> <span class="hljs-string">"./abc"</span>;
            </code>
          </div>
          <p class="fragment" data-fragment-index="0">
            Default and named exports, together at last!
          </p>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
          <h3>
            You might even say <span class="fragment" data-fragment-index="0">the ES2015 module
            system enforces the discipline I outlined
            earlier...</span> <span class="fragment" data-fragment-index="1">which means it doesn't
            have to be <em>self</em>-discipline.</span>
          </h3>
          <br>
          <p class="fragment" data-fragment-index="2">
            And that makes all the difference.
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>Multiple exports?</h2>
          <p class="fragment" data-fragment-index="0">
            ES2015 <code class="javascript hljs"><span class="hljs-keyword">export</span></code> statements must
            appear only at the top level of a
            module, <span class="fragment" data-fragment-index="1">and must have one of the
            following forms</span><span class="fragment" data-fragment-index="2">—all of
            which have <strong>names</strong>:</span>
          </p>
          <ul>
            <li class="fragment" data-fragment-index="3">
              <code class="javascript medium hljs"><span class="hljs-keyword">export</span> <span class="hljs-keyword">var</span> a = ...;</code>
            </li>
            <li class="fragment" data-fragment-index="4">
              <code class="javascript medium hljs"><span class="hljs-keyword">export</span> <span class="hljs-keyword">let</span> b = ...;</code>
            </li>
            <li class="fragment" data-fragment-index="5">
              <code class="javascript medium hljs"><span class="hljs-keyword">export</span> <span class="hljs-keyword">const</span> c = ...;</code>
            </li>
            <li class="fragment" data-fragment-index="6">
              <code class="javascript medium hljs"><span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">d</span>(<span class="hljs-params"></span>) </span>{...}</code>
            </li>
            <li class="fragment" data-fragment-index="7">
              <code class="javascript medium hljs"><span class="hljs-keyword">export</span> <span class="hljs-function"><span class="hljs-keyword">function</span>* <span class="hljs-title">e</span>(<span class="hljs-params"></span>) </span>{...}</code>
            </li>
            <li class="fragment" data-fragment-index="8">
              <code class="javascript medium hljs"><span class="hljs-keyword">export</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">F</span> </span>{...}</code>
            </li>
            <li class="fragment" data-fragment-index="9">
              <code class="javascript medium hljs"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <em>expression</em>;</code>
            </li>
            <li class="fragment" data-fragment-index="10">
              <code class="javascript medium hljs"><span class="hljs-keyword">export</span> {a, b, c, d, e <span class="hljs-keyword">as</span> genFn, F};</code>
            </li>
          </ul>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>Multiple exports?</h2>
          <p class="fragment" data-fragment-index="0">
            ES2015 <code class="javascript hljs"><span class="hljs-keyword">import</span></code> statements
            provide no way to obtain the <code>exports</code> object
            itself.
          </p>
          <p class="fragment" data-fragment-index="1">
            In fact, native implementations of ES2015 modules need not
            use objects to represent exports at all!
          </p>
          <p class="fragment" data-fragment-index="2">
            That's just an implementation detail that happens to be
            convenient if you're compiling for an environment that
            supports CommonJS.
          </p>
          <p class="fragment" data-fragment-index="3">
            This makes it possible to determine, <a target="_blank" href="http://calculist.org/blog/2012/06/29/static-module-resolution/">statically</a>,
            for any form of <code class="javascript hljs"><span class="hljs-keyword">import</span></code>
            statement, exactly which exports it does and doesn't care
            about.
          </p>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
          <h2>
            Detailed
            <a href="http://www.2ality.com/2014/09/es6-modules-final.html" target="_blank">explanation</a> by <a target="_blank" href="https://twitter.com/rauschma">Axel Rauschmayer</a> of
               every variation of <code class="javascript hljs"><span class="hljs-keyword">import</span></code>
               and <code class="javascript hljs"><span class="hljs-keyword">export</span></code> syntax.
          </h2>
        </section>

        <section class="external_iframe future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>
            <a target="_blank" href="./The importance of import and export_files/saved_resource.html">Rollup</a>
            <span class="fragment" data-fragment-index="0">(<a target="_blank" href="https://twitter.com/Rich_Harris">Rich Harris</a>)</span>
          </h2>
          <p class="fragment" data-fragment-index="1">
            <em>A tool from the future.</em>
          </p>
          <iframe class="fragment" src="./The importance of import and export_files/saved_resource.html" data-fragment-index="2"></iframe>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
          <h2>
            But enough about the future.
          </h2>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>How can you use ES2015 modules today?</h2>
          <p class="fragment" data-fragment-index="0">
            I would love to tell you, "Just use
            Meteor!" <span class="fragment" data-fragment-index="1">And that will soon be the
            case.</span>
          </p>
          <p class="fragment" data-fragment-index="2">
            Until Meteor 1.3 is released, I've put together
            <a href="https://www.npmjs.com/package/jsnext-skeleton" target="_blank">a skeleton NPM package</a> that you can clone
            and modify, or just use as inspiration:
          </p>
          <code class="fragment bash block small" data-fragment-index="3">
git clone <a target="_blank" href="https://github.com/benjamn/jsnext-skeleton">https://github.com/benjamn/jsnext-skeleton</a>.git
cd jsnext-skeleton
npm install
npm test</code>
          <p class="fragment" data-fragment-index="4">
            Try it, break it, republish it as your own, submit issues!
          </p>
        </section>

        <section class="full_height future" hidden="" aria-hidden="true" style="top: 330px; display: none;">
          <h2>How can you use ES2015 modules today?</h2>
          <p class="fragment" data-fragment-index="0">
            Some stuff you can do with this skeleton package:
          </p>
          <ul>
            <li class="fragment" data-fragment-index="1">
              write ES2015 in the <code>src/</code> directory,
            </li>
            <li class="fragment" data-fragment-index="2">
              transpile from <code>src/</code> into <code>lib/</code>
              using an <code>npm</code> prepublish command,
            </li>
            <li class="fragment" data-fragment-index="3">
              run <a target="_blank" href="https://www.npmjs.com/package/mocha"><code>mocha</code></a>
              tests against code from both <code>src/</code>
              and <code>lib/</code>, ensuring identical output, and
            </li>
            <li class="fragment" data-fragment-index="4">
              publish both <code>lib/</code> and <code>src/</code> code to
              NPM, so everything Just Works™ but also ES2015-aware
              tools like Rollup can work their magic.
            </li>
          </ul>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
          <h3>
            Soon you'll be publishing both ES2015 and CommonJS to NPM,
            <span class="fragment" data-fragment-index="0">but what use are either of those formats
            to folks who really just want a <code>.js</code> file they can
            load with a
            <code class="xml hljs"><span class="hljs-tag">&lt;<span class="hljs-title">script</span>&gt;</span><span class="undefined"></span></code> tag on a web
            page?</span>
          </h3>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
          <h2>To bundle, or not to bundle?</h2>
          <p class="fragment" data-fragment-index="0">
            <strong>Some say:</strong> <span class="fragment" data-fragment-index="1">bundles need
            to be created at publish time, so that library authors can deal with
            bundling errors, instead of burdening the consumer.</span>
          </p>
          <p class="fragment" data-fragment-index="2">
            <strong>Others say:</strong> <span class="fragment" data-fragment-index="3">if library
            authors bundle in their dependencies, consumers of multiple
            libraries may end up with conflicting copies of those
            dependencies.</span>
          </p>
          <p class="fragment" data-fragment-index="4">
            <strong>Still others:</strong> <span class="fragment" data-fragment-index="5">if we
            could all just use the same language for writing modules, then
            our bundling tools would have a much easier job.</span>
          </p>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
          <h2>The part of the talk where I sing the praises of Meteor</h2>
          <p class="fragment" data-fragment-index="0">
            Meteor's build system takes care of pretty much every aspect
            of bundling for you. <span class="fragment" data-fragment-index="1">Only binary
            dependencies need to be published for multiple
            architectures.</span>
          </p>
          <p class="fragment" data-fragment-index="2">
            Meteor uses an <a target="_blank" href="https://www.meteor.com/version-solver">optimizing
            constraint solver</a> (compiled from C++ to JS
            using <a target="_blank" href="http://kripken.github.io/emscripten-site">Emscripten</a>)
            to ensure compatible package versions.
          </p>
          <p class="fragment" data-fragment-index="3">
            Meteor will support ES2015 modules in version
            1.3, <span class="fragment" data-fragment-index="4">if I have anything to do with
            it.</span> <span class="fragment" data-fragment-index="5">And I have everything to do
            with it.</span> <span class="fragment" data-fragment-index="6">No, seriously, you know
            who to blame if modules don't make it into the 1.3 release.</span>
          </p>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 41.5px; display: block;">
          <h2>My pleas:</h2>
          <br>
          <ul>
            <li class="fragment" data-fragment-index="0">
              Start writing ES2015 modules sooner rather than later,
              assuming I have persuaded you that they are awesome.
            </li>
            <li class="fragment" data-fragment-index="1">
              No need for funny file
              extensions. <span class="fragment" data-fragment-index="2">ES2015 is
              <code>.js</code>.</span>
            </li>
            <li class="fragment" data-fragment-index="3">
              Publish your source files to NPM, in addition to your
              CommonJS files, so that sophisticated tools can begin making
              use of them.
            </li>
            <li class="fragment" data-fragment-index="4">
              Add a
              <a href="https://github.com/rollup/rollup/wiki/jsnext:main" target="_blank"><code>jsnext:main</code></a> property to
                 your <code>package.json</code>, so the tools know where
                 to look.
            </li>
          </ul>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 0px; display: block;">
          <h2>
            Better yet, <span class="fragment" data-fragment-index="0">if you want to help me
            submit automated pull requests to every Node project on
            GitHub,</span> <span class="fragment" data-fragment-index="1">find me after this
            talk!</span>
          </h2>
          <br>
          <pre class="contact fragment" data-fragment-index="2">     { <a target="_blank" href="http://github.com/benjamn">github</a>,
       <a target="_blank" href="http://twitter.com/benjamn">twitter</a>,
       <a target="_blank" href="http://instagram.com/benjamn">instagram</a>,
       <a target="_blank" href="http://facebook.com/benjamn">facebook</a>
     }.com/benjamn

ben@{<a href="mailto:ben@benjamn.com">benjamn</a>,<a href="mailto:ben@meteor.com">meteor</a>}.com
            </pre>
        </section>

        <section data-background="img/teal_and_red.jpg" data-background-image="img/teal_and_red.jpg" hidden="" aria-hidden="true" class="future" style="top: 123.5px; display: block;">
          <h1 class="thanks">Thanks!</h1>
        </section>
      </div>
    <div class="backgrounds"><div class="slide-background present" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-loaded="true" style="display: block;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background external_iframe future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background full_height future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-background-hash="img/teal_and_red.jpgnullnullnullnullnullnullnullnull" data-loaded="true" style="display: block; background-image: url(&quot;img/teal_and_red.jpg&quot;);"></div></div><div class="progress" style="display: block;"><span style="width: 0px;"></span></div><aside class="controls" style="display: block;"><div class="navigate-left"></div><div class="navigate-right enabled fragmented"></div><div class="navigate-up"></div><div class="navigate-down"></div></aside><div class="slide-number"></div><div class="pause-overlay"></div><div id="aria-status-div" aria-live="polite" aria-atomic="true" style="position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px 1px 1px 1px);">
          
            The Importance of import
            and export
          
          
            
              
              Ben Newman
              (Meteor)
              
              EmpireNode 2015
              
            
            
            { github,
  twitter,
  instagram,
  facebook
}.com/benjamn
            
          
        </div></div>

    <script src="./The importance of import and export_files/head.min.js"></script>
    <script src="./The importance of import and export_files/reveal.js"></script>
    <script src="./The importance of import and export_files/init.js"></script><script type="text/javascript" src="./The importance of import and export_files/zoom.js"></script><script type="text/javascript" src="./The importance of import and export_files/notes.js"></script>
    <script src="./The importance of import and export_files/ga.js"></script>
  

</body></html>